<template>
  <div style="display: inline-block;">
    <ul class="el-upload-list el-upload-list--picture-card">
      <li v-for="item in values" class="el-upload-list__item ">
        <img :src="item" alt="" class="el-upload-list__item-thumbnail">
        <a class="el-upload-list__item-name"><i class="el-icon-document"></i> </a>
        <span class="el-upload-list__item-actions">
         <span @click="handlePictureCardPreview(item)"
          class="el-upload-list__item-preview">
        <i class="el-icon-zoom-in"></i></span>
        </span>
      </li>
    </ul>
    <!--图片预览-->
    <el-dialog :visible.sync="previewImgVisible"  append-to-body>
      <img :src="dialogImageUrl" style="width: 100%;" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import config from '../../config'
  import {getCookie} from '../../libs/cookie'

  export default {
    name: 'es-preview-img',
    props: {
      value: [Array,String]//图片地址
    },
    data: function () {
      return {
        values: [],
        previewImgVisible:false,
        dialogImageUrl:''
      }
    },
    mounted: function () {
        this.values =typeof this.value === 'string'?[this.value]:this.value;
    },
    methods: {
      handlePictureCardPreview(url) {
        this.dialogImageUrl = url;
        this.previewImgVisible = true;
      }
    }
  }
</script>

<style scoped>

</style>
